<template>
  <div>
    <header>
      <div>
        <span>北京</span>
        <span>试试搜:呷哺呷哺</span>
      </div>
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <navigator :url="`/pages/index/detail?id=${item.id}`">
            <img :src="item.picUrl" alt="" />
          </navigator>
        </swiper-item>
      </swiper>
    </header>
    <section class="category">
      <navigator
        :app-id="item.appId"
        :path="item.appLink"
        :target="item.appId ? 'miniProgram' : ''"
        v-for="(item, index) in items"
        :key="index"
      >
        <img :src="item.img" alt="" mode="widthFix" />
        <span>{{ item.name }}</span>
      </navigator>
    </section>
  </div>
</template>

<script>
import { getBanner, getFunctionWidget} from "../server";
export default {
  data() {
    return {
      banner: [],
      items: [],
    };
  },
   async created() {
    // 获取banner
    var result = await getBanner();
    console.log(result);
    if (result.errNo == 0) {
      this.banner = result.data;
      console.log(this.banner,"123");
    }
    //获取火爆餐厅
   var result =  await getFunctionWidget()
    if (result.errNo == 0) {
      this.items = result.data.items;
    }
  },
  methods: {},
};
</script>

<style scoped>
header {
  width: 100%;
  padding-top: 60rpx;
  background: linear-gradient(180deg, red, #fff);
}
header > div:first-child {
  font-size: 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  color: white;
}
header > div:first-child > span:first-child{
  margin: 0 20rpx;
}
header > div:first-child > span:nth-child(2) {
  width: 200rpx;
  height: 67rpx;
  line-height: 67rpx;
  padding: 13rpx 70rpx;
  border-radius: 40rpx;
  background-color:rgba(250, 248, 243, 0.507);
  /* opacity: .5; */
}
swiper {
  height: 225rpx;
  width: 90%;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 50rpx 5% 50rpx;
}
swiper img {
  width: 100%;
  height: 225rpx;
}
.category {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.category navigator {
  width: 25%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category img {
  width: 60%;
}
/* 热门品牌 */
.hot{
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hot >div:first-child{
  display: flex;
  justify-content: space-between;
}
</style>
